<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>登录页</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/login.css">
    <!-- 
        外部阿里巴巴矢量图标 
        <link rel="stylesheet" href="http://at.alicdn.com/t/font_2175095_cueku40yyub.css">
    -->
    <!-- 引入外部jQuery CDN文件 -->
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div class="login-box">
        <h3>账户登录</h3>
        <form id="login-form">
            <div class="user-name">
                <label for="name" class="iconfont iconzhanghao"></label>
                <input id="name" name="name" type="text" placeholder="邮箱/用户名/登录手机" autocomplete="off">
            </div>
            <div class="user-pwd">
                <label for="pwd" class="iconfont iconmima"></label>
                <input id="pwd" name="password" type="password" placeholder="密码">
                <div class="iconfont iconclose-eye changeStatus"></div>
            </div>
            <button class="user-btn">登录</button>
            <div class="user-action">
                <a href="./forgetPassword.html">忘记密码</a>
                <a href="./register.html">立即注册</a>
            </div>
        </form>
    </div>
    <!-- 脚本代码 -->
    <script>
        /*
            1、监听页面加载完毕，常见的三种写法
                $(function(){代码段...})
                $(document).ready(function(){代码段...})
                $().ready(function(){代码段...})
            2、监听表单提交事件
                $('#login-form').submit(function(){代码段...})
            3、元素选择器：$('input[name="user"]')
            4、输入元素值：$('[name="user"]').val();$('[name=tel]').val();
            5、终止默认事件的传递event.preventDefault();
            6、替换空格.replace(/\s+/g, "")
        */
        $(function(){
            /*监听表单提交*/
            $('#login-form').submit(function(){
                /* 1、获取输入元素值 */
                var userAccount = $('input[name="name"]').val();
                var userPassword = $('input[name="password"]').val();
                /* 2、检验输入内容是否合法，给出对应提示 */
                if(userAccount.replace(/\s+/g,"").length === 0){
                    alert('账号不能为空')
                    /** 当不合法时阻止表单提交 */
                    event.preventDefault();
                    /** return会阻止当前代码的执行，即终端当前代码 */
                    return false;
                }else if(userPassword.replace(/\s+/g,"").length === 0){
                    alert('密码不能为空')
                    /** 当不合法时阻止表单提交 */
                    event.preventDefault();
                }else{
                    alert('表单提交成功')
                }
            })
        })
    </script>
    <!-- 公共脚本代码 -->
    <script src="../js/base.js"></script>
</body>
</html>